<admintpl file="wx_header"/>
<div class="container" id="app">
    <!--导航-->
    <div class="row">
        <nav class="col-md-12 m1">
            <ul class="nav nav-tabs">
                <volist name="menu" id="vo">
                    <li role="presentation" {:$vo['key']==$pageKey?'class="active"':''}><a href="#">{$vo.title}</a></li>
                </volist>
            </ul>
        </nav>
    </div>
    <!--搜索框-->
    <div class="row m1">
        <div class="col-md-4">
            <div class="input-group col-md-8">
                <input type="text" class="form-control" placeholder="标题/作者/摘要" aria-describedby="search" v-model="keywords">
                <span class="input-group-btn" id="search" @click="search"><button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button></span>
            </div>
        </div>
    </div>
    <!--头部-->
    <div class="row m1">
        <div class="col-md-4">
            图文消息（共9条）
        </div>
        <div class="col-md-4 col-md-offset-4 ">
            <a class="btn btn-success btn-sm pull-right" href="{:U('add',array('key'=>$pageKey))}">+新建图文消息</a>
        </div>
    </div>
    <!---->
   <div class="row m1" id="main">
       <template v-for="list in lists">
               <template v-if="list.extra.length == 1">
                <!--单图文-->
                   <div class="col-md-4 box">
                       <!--面板-->
                       <div class="panel panel-success" >
                           <!--面板头-->
                           <div class="panel-heading">
                               更新于:<abbr title="文章最近修改时间" class="initialism">{{list.modify_time}}</abbr>
                           </div>
                           <div class="panel-body" style="padding-bottom: 0%">
                               <div class="row item">
                                   <!--首条新闻-->
                                   <div class="col-md-12">
                                       <div class="thumbnail">
                                           <div class=" center-block"><p>{{list.extra[0].title}}</p></div>
                                           <a href="#" class="show">
                                               <img :src="list.extra[0].thumb" :alt="list.extra[0].title" :title="list.extra[0].title">
                                           </a>
                                           <div class="digest m1">
                                               <p>{{list.extra[0].digest|substr}}</p>
                                           </div>
                                       </div>
                                   </div>
                                   <div class="shade-big" >
                                       <div>
                                           <div>
                                               预览文章

                                           </div>
                                       </div>
                                   </div>
                               </div>
                               <!--尾部修改-->
                               <div class="row rb bg-success foot-edit">
                                   <div class="col-md-6 clearp">
                                       <label>
                                           <a class="show " style="border-right:1px solid #e1e1e1 "><i class="glyphicon glyphicon-pencil"></i></a>
                                       </label>
                                   </div>
                                   <div class="col-md-6 clearp">
                                       <label>
                                           <a class="show"><i class="glyphicon glyphicon-trash"></i></a>
                                       </label>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>

               </template>
               <template v-else-if="list.extra.length<1">
                   <div class="col-md-12">
                       <h4>暂无素材</h4>
                   </div>
               </template>
               <template v-else>
                   <div class="col-md-4 box">
                       <!--面板-->
                       <div class="panel panel-success" >
                           <!--面板头-->
                           <div class="panel-heading">
                               更新于:<abbr title="文章最近修改时间" class="initialism">{{list.modify_time}}</abbr>
                           </div>
                           <div class="panel-body" style="padding-bottom: 0%">


                               <template v-for="(item,index) in list.extra">
                                   <template v-if="index==0">
                                       <div class="row item">
                                           <!--首条新闻-->
                                           <div class="col-md-12">
                                               <div class="thumbnail">
                                                   <a href="#" style="display: block;position: relative;">
                                                       <img :src="item.thumb" :alt="item.title" :title="item.title">
                                                       <div class="shade">
                                                           {{item.title}}
                                                       </div>
                                                   </a>
                                               </div>
                                           </div>
                                           <div class="shade-big" >
                                               <div>
                                                   <div>
                                                       预览文章

                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </template>
                                    <template v-else>
                                   <div class="row rb p10 item">
                                       <div class="col-md-12">
                                           <h6 class="pull-left col-md-8">{{item.title}}
                                           </h6>
                                           <div class="thumbnail pull-right col-md-4">
                                               <a href="#" class="show">
                                                   <img :src="item.thumb" alt="...">

                                               </a>
                                           </div>

                                       </div>
                                       <div class="shade-big">
                                           <div>
                                               <div>
                                                   <p style="text-align: center!important;">预览文章</p>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                                    </template>
                               </template>

                               <!--尾部修改-->
                               <div class="row rb bg-success foot-edit">
                                   <div class="col-md-6 clearp">
                                       <label>
                                           <a class="show " style="border-right:1px solid #e1e1e1 "><i class="glyphicon glyphicon-pencil"></i></a>
                                       </label>
                                   </div>
                                   <div class="col-md-6 clearp">
                                       <label>
                                           <a class="show"><i class="glyphicon glyphicon-trash"></i></a>
                                       </label>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </template>
           </div>
       </template>

   </div>
</div>
<admintpl file="wx_footer"/>
<script>
    var Page = {
        p:0,
        lenght:9,
        _url:'{:U(ACTION_NAME,array("key"=>$pageKey))}',
        lists:[],
        init:function () {
            this.getList();
        },
        getList:function () {
            //获取列表
            var _this = this
            $.ajax({
                url:_this._url,
                async:false,
                data:{
                    start:_this.p++,
                    length:_this.lenght
                },
                dataType:'json',
                success:function (e) {
                    if(e.status ==1){
                        _this.lists = e.info
                    }
                }
            });
        }
    }
    $(function () {
        Page.init();
        var _lists = Page.lists//初始化列表
        main = new Vue({
            el:'#app',
            data:{
                keywords:'',
                lists:_lists,
            },
            methods:{
                search:function () {

                    alert(this.keywords);
                },
                shade:function () {

                }
            },
            filters:{
                substr:function (str) {
                    var n = 120;
                    var r=/[^\x00-\xff]/g;
                    if(str.replace(r,"mm").length<=n){return str;}
                    var m=Math.floor(n/2);
                    for(var i=m;i<str.length;i++){
                        if(str.substr(0,i).replace(r,"mm").length>=n){
                            return str.substr(0,i)+"...";
                        }
                    }
                    return str;
                }
            },
            mounted:function () {
                console.log(this.lists)
                $("img").lazyload();
                $('#main').masonry();
            }
        })


    })
</script>